import React from 'react';
import {Row,Button,Form,Select,Input, Message,Checkbox} from "antd";
import Region from '../../components/Region/Region';
import { Router, Route, hashHistory, browserHistory, IndexRoute, IndexRedirect , Redirect } from 'react-router'
const createForm = Form.create;
const Option = Select.Option;
const FormItem = Form.Item;
import NavLink from '../../components/menuBar/navLink'
let FunderApply = React.createClass({
    getInitialState() {
        return {
        province: '110000', // 省
        city: '110100',  // 城市
        district: '110101', // 区域
        areaId: '110101',
        data: null,
        mobilePhone: '', //初始化
        validCode: '',   //图形验证码
        visible: false,
        count:60,
        time: true,
        checked:true,
        }
    },
    // componentDidMount(){
    //     this.validCode();
    // },
    // //图形验证码
    // validCode() {
    //     var img = document.getElementById("Img");
    //     img.src = Utils.apiServer + "/validImg?rnd=" + Math.random();
    // },
    handleSubmit(e){
        let me = this;
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            
            var params = this.props.form.getFieldsValue();
            if(params.agree==false){
                Message.error('请勾选爱租派平台服务协议');
                return
            }
            params.address = this.state.areaId;
            params.nid = 'register';
            Utils.sendAjax({
                url: '/user/applyReg',
                data: JSON.stringify(params),
                method: 'post',
                callback: (result) => {
                if (result.code === '200') {
                    Message.success(result.message);
                   hashHistory.push('/');
                } else {
                    Message.error(result.message, 10)
                }
                }
            });
        });
    },
    changeAreaId(area) {
        selectedArea = String(area);
        var selectedProvince = selectedArea.substr(0, 2) + "0000";
        var selectedCity = selectedArea.substr(0, 4) + "00";
        this.setState({
            province: selectedProvince,
            city: selectedCity,
            district: selectedArea,
            areaId: area,
        })
    },
    sendCode() {
        let params = this.props.form.getFieldsValue();
        let mobilePhone = params.contactPhone;
        let me = this;
        timer=setInterval(function () {
            var count = me.state.count;
            count--;
            if(count<1) {
                me.setState({
                    time: true,

                })
                count = 60;
                clearInterval(timer)
            }
            me.setState({
                count: count
            })
        },1000)
        Utils.sendAjax({
            url: '/message/sms/send',
           data: JSON.stringify({mobilePhone: mobilePhone, validCode: '9999', nid: 'register'}),
            callback: (result)=> {
                if(result.code == '200') {
                    Message.success('验证码发送成功，请注意查收')
                    me.setState({
                        time: false
                    })
                }else{
                    Message.error(result.message, 10)
                }
            }
        })

    },
    onChange(e) {
        this.setState({
            checked: e.target.checked,
        });
    },
    render() {
        var text =  this.state.time ? '获取验证码' : this.state.count + 's后可重新获取';
        const canClick = this.state.time ? false : true;
        const { getFieldProps ,getFieldDecorator } = this.props.form;
        const addressProps = getFieldProps('address', {
           initialValue:"杭州",
           rules: [
             {required: true, message: '请输入所在城市'},
           ],
         });

        const tenementCountProps = getFieldProps('tenementCount', {
        rules: [
            {required: true, 
                
            message: '请输入房间数量'
           },
           {validator: Utils.integer}
        ],
        });

        const contactsProps = getFieldProps('contacts', {
        rules: [
            {required: true, message: '请输入联系人'},
      
        ],
        });

        const contactPhoneProps = getFieldProps('contactPhone', {
        rules: [
            {required: true, message: '请输入联系电话'},
            {validator: Utils.phone}
        ],
        onChange: (e) => {
            this.setState({mobilePhone: e.target.value});
        },
        });

        const validCodeProps = getFieldProps('validCode', {
        rules: [
            {required: true, message: '请输入图形验证码'},
        ],
        
        });

        const remarkProps = getFieldProps('remark', {

        });
        return (
                <div>
                    <div className="lEWrap">
                        <div className="leContent">
                            <div className="leTitle">入驻申请</div>
                            <div className="leTip">请如实填写以下信息，平台审核通过后，即可成为爱租派房东用户。带 <em>*</em> 为必填内容</div>
                            <div className="leBox">
                                <Form form={this.props.form} className="landlordMgs" >
                                    <ul>
                                        <li className="leMgsTxt">所在城市 <em>*</em> </li>
                                        <li className="leMgsTxt leHouse">房间数量 <em>*</em> </li>
                                    </ul>
                                    <ul>
                                        <li>
                                             <FormItem>
                                               <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId} /> 
                                             </FormItem> 
                                        </li>
                                        <li style={{paddingLeft:"70px"}}>
                                            <FormItem label="">
                                               <Input className="leCount" {...tenementCountProps} vmaxlength="60" placeholder="请输入房间数量"  style={{width:"378px"}}/>
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li className="leMgsTxt">联系人 <em>*</em> </li>
                                        <li className="leMgsTxt leHouse">手机号码 <em>* </em></li>
                                    </ul>
                                 
                                     <ul>
                                        <li>
                                            <FormItem label="">
                                                <Input className="leCount leAdd" {...contactsProps} vmaxlength="60" placeholder="请输入联系人姓名"  style={{width:"378px"}}/>
                                            </FormItem>
                                        </li>
                                        <li>
                                            <FormItem label="">
                                                <Input className="leCount " {...contactPhoneProps} vmaxlength="60" placeholder="请输入手机号码"  style={{width:"378px"}}/>
                                            </FormItem>
                                       </li>
                                    </ul>
                                    <ul>
                                        <li className="leMgsTxt">备注信息  </li>
                                    </ul>
                                    <ul>
                                        <li>
                                           <FormItem label="">
                                              <Input type="textarea"  {...remarkProps} placeholder="请输入备注信息" style={{width:"900px",height:"80px"}}/>
                                           </FormItem>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li className="leMgsTxt leWidth">验证码 <em>*</em></li>
                                    </ul>
                                    <ul>
                                        <li>
                                             <FormItem label="">
                                                <Input className="leInput " {...validCodeProps} vmaxlength="70" placeholder="不区分大小写" />
                                             </FormItem>
                                        </li>
                                        
                                         <li className="fpImg">
                                             <FormItem label="">
                                                 <Button disabled={canClick} onClick={this.sendCode}>{text}</Button>
                                             </FormItem>
                                         </li>
                                    </ul>
                                    <ul className="leBtn" >
                                        <li style={{ height: '0px', lineHeight: '20px' }}>
                                            <FormItem>
                                                <Checkbox   checked={this.state.checked} {...getFieldProps('agree',{onChange:this.onChange}) }></Checkbox>
                                                   &nbsp; &nbsp; 我已阅读并且同意<NavLink to="/agreement"  style={{ color: '#57c5f7' }}>
                                                    &lt; &lt; 爱租派平台服务协议&gt; &gt;
                                                </NavLink>
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="leBtn" >
                                        <li>
                                            <Button className="leApplyBtn" type="primary" onClick={this.handleSubmit}>提交申请</Button>
                                        </li>
                                    </ul>
                                </Form>
                            </div>
                        </div>
                    </div>
            </div>
        )
    }
})
FunderApply = createForm()(FunderApply);
export default FunderApply;
